<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 引入 Bootstrap v3 的 CSS 文件 -->
		<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.css">
		<!-- 引入 jQuery（Bootstrap v3 依赖） -->
		<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
		<!-- 引入 Bootstrap v3 的 JS 文件 -->
		<script src="bootstrap-3.4.1/js/bootstrap.js"></script>
		<title>患者列表</title>
		<style>
			.ytd {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">患者管理</a>
				</div>
			</div>
		</nav>
		<!-- 搜索输入框 -->
		<div class="container" style="margin-bottom: 10px;">
			<div class="row">
				<div class="col-md-4">
					<input type="text" id="searchInput" class="form-control" placeholder="输入患者姓名实时搜索...">
				</div>
			</div>
		</div>
		<script>
			window.onload = function () {
				initPatients(1, 1000);
				// 绑定输入事件
				$('#searchInput').on('input', function() {
					filterPatients();
				});
			}

			let allPatients = [];
			function initPatients(pn, size) {
				$.ajax({
					url: 'http://localhost:8080/patients/' + pn + '/' + size,
					type: 'get',
					dataType: 'json',
					success: function (res) {
						if (res.code == 200) {
							$("#patientsTb").empty();
							$("#pageBar").empty();
							allPatients = res.data.list;
							renderPatients(allPatients);
							// 分页条
							$(`<li><a href='#' aria-label='Previous' onclick='initPatients(${res.data.pageNum - 1},${size})'><span aria-hidden='true'>&laquo;</span></a></li>`).appendTo($("#pageBar"));
							let current_pages = res.data.navigatepageNums;
							for (var i = 0; i < current_pages.length; i++) {
								let page = current_pages[i];
								if (pn == page) {
									$(`<li class='active'><a href='#' onclick='initPatients(${page},${size})'>${page}</a></li>`).appendTo($("#pageBar"));
								} else {
									$(`<li><a href='#' onclick='initPatients(${page},${size})'>${page}</a></li>`).appendTo($("#pageBar"));
								}
							}
							$(`<li><a href='#' aria-label='Next' onclick='initPatients(${res.data.pageNum + 1},${size})'><span aria-hidden='true'>&raquo;</span></a></li>`).appendTo($("#pageBar"));
						}
					},
					complete: function (err) {
						console.log('响应失败', err)
					}
				});
			}

			function renderPatients(patients) {
				const $tb = $("#patientsTb");
				$tb.empty();
				for (var i = 0; i < patients.length; i++) {
					let p = patients[i];
					$(`<tr>
						<td class='ytd'>${p.id}</td>
						<td class='ytd'>${p.pname || ''}</td>
						<td class='ytd'>${p.pidcard || ''}</td>
						<td class='ytd'>${p.ptel || ''}</td>
						<td class='ytd'>${p.page || ''}</td>
						<td class='ytd'>${p.pgender === 1 ? '男' : (p.pgender === 0 ? '女' : '')}</td>
						<td class='ytd'>${p.pnation || ''}</td>
						<td class='ytd'>${p.pcm || ''}</td>
						<td class='ytd'>${p.pkg || ''}</td>
						<td class='ytd'>${p.pbmi || ''}</td>
						<td class='ytd'>${p.pjob || ''}</td>
						<td class='ytd'>${p.pactivity || ''}</td>
						<td class='ytd'>
							<button class='btn btn-primary btn-xs' onclick='editPatient(${p.id})'>编辑</button>
							<button class='btn btn-info btn-xs' onclick='viewDetails(${p.id})'>详情</button>
							<button class='btn btn-danger btn-xs' onclick='deletePatient(${p.id})'>删除</button>
						</td>
					</tr>`).appendTo($tb);
				}
			}

			function filterPatients() {
				const keyword = $('#searchInput').val().trim();
				if (!keyword) {
					renderPatients(allPatients);
					return;
				}
				const filtered = allPatients.filter(p =>
        						(p.pname && p.pname.toString().indexOf(keyword) !== -1) ||
       							(p.pidcard && p.pidcard.toString().indexOf(keyword) !== -1) ||
       							(p.ptel && p.ptel.toString().indexOf(keyword) !== -1) ||
        						(p.pnation && p.pnation.toString().indexOf(keyword) !== -1) ||
       			 				(p.pjob && p.pjob.toString().indexOf(keyword) !== -1)
			)
				renderPatients(filtered);
			}

			function editPatient(id) {
				// 你可以在这里实现跳转到编辑页面的逻辑
				console.log('编辑患者:', id);
				alert('跳转到编辑页面，ID: ' + id);
				// 示例: window.location.href = `patients_add.html?id=${id}`;
			}

			function viewDetails(id) {
				// 你可以在这里实现跳转到详情页或弹出详情模态框的逻辑
				console.log('查看患者详情:', id);
				alert('查看患者详情，ID: ' + id);
				// 示例: window.location.href = `patient_details.html?id=${id}`;
			}

			function deletePatient(id) {
				// 你可以在这里实现删除逻辑
				console.log('删除患者:', id);
				if (confirm('确定要删除这位患者吗？')) {
					alert('将发送删除请求，ID: ' + id);
					// 示例: 
					// $.ajax({
					//     url: `http://localhost:8080/patients/${id}`,
					//     type: 'DELETE',
					//     success: function(res) {
					//         if (res.code === 200) {
					//             alert('删除成功');
					//             initPatients(1, 1000); // 刷新列表
					//         } else {
					//             alert('删除失败: ' + res.message);
					//         }
					//     }
					// });
				}
			}
		</script>
		<!-- 患者列表表格 -->
		<table class="table table-bordered table-striped table-condensed">
			<thead>
				<th class='ytd'>编号</th>
				<th class='ytd'>姓名</th>
				<th class='ytd'>身份证号</th>
				<th class='ytd'>电话</th>
				<th class='ytd'>年龄</th>
				<th class='ytd'>性别</th>
				<th class='ytd'>民族</th>
				<th class='ytd'>身高(cm)</th>
				<th class='ytd'>体重(kg)</th>
				<th class='ytd'>BMI</th>
				<th class='ytd'>职业</th>
				<th class='ytd'>活动量</th>
				<th class='ytd'>操作</th>
			</thead>
			<tbody id="patientsTb">
			</tbody>
			<tfoot>
				<tr>
					<td colspan="12" style="text-align: center;">
						<nav aria-label="Page navigation">
						  <ul class="pagination" id="pageBar">
						  </ul>
						</nav>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>